<template>
<div>
<el-card class="card">
  <div style="font-size:30px">登录</div>
  <el-icon size="30" color="red"><CloseBold style="width: 1em; height: 1em; margin-left: 8px" @click="quxiao"/></el-icon>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model.trim="ruleForm.username" autocomplete="off" placeholder="请输入用户名" />
    </el-form-item>
    <el-form-item label="密 码" prop="password" >
      <el-input v-model.trim="ruleForm.password" type="password" autocomplete="off" placeholder="请输入密码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</el-card>
</div>
</template>

<script setup>

import { inject, onMounted, reactive, ref, toRefs,getCurrentInstance} from 'vue'
const ruleFormRef = ref<import('element-plus').FormInstance>('')
const {appContext:{config:{globalProperties:$http}}} = getCurrentInstance()
import { ElMessage } from 'element-plus'

let ruleForm = reactive({
  uid:1,
  username: "",
  password: "",
  phone:"",
  deleted:0,
  enabled:'B'
})

const rules = reactive<import('element-plus').FormRules>({
  username: [{ required:true,message:"请输入用户名",type:'String', trigger: 'blur'},
             {min: 6, max: 50, message: '用户名长度在 6 到 50 个字符', trigger: 'blur'}],
  password: [{required:true,message:"请输入密码",type:'String', trigger: 'blur' },
             {min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur'}],
})
let islogin=inject('islogin')

const submitForm = (ruleFormRef) => {
  if (!ruleFormRef) return
  ruleFormRef.validate((valid) => {
       console.log(ruleForm)
       console.log(ruleForm.type)
        console.log(JSON.stringify(ruleForm))
       console.log($http)
    $http.$http.post(`/user/login`,ruleForm).then((res) => {
        ruleForm=res
        console.log(res)
        ElMessage('登录成功')
      },(err)=>{
        alert("数据请求失败")
      })
 console.log("shide")
  }
)
};

const quxiao = ()=>{
  islogin.changeit()
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
} 
const{username,password} = toRefs(ruleForm,rules)
</script>
<style lang="less" scoped>
.card{
  width: 400px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding:30px 40px 0 10px;
    box-shadow: -15px 15px 20px #8d939c;
    opacity: 1;
    background: linear-gradient(
          230deg,
          rgba(143, 191, 219, 0) 0%,
          rgb(143, 108, 193) 100%
    );
  .el-form {
  margin-top: 0px;
}
}
</style>